<template>
  <div>
    <h3>产品规格</h3>
    配置:
    <div class="item">
        <!-- class="active" -->
        <a href="#" :class="current == 1 ? 'active' : '' " @click.prevent="selectGuiGe(1)">8G+256G</a>
        <a href="#" :class="current == 2 ? 'active' : '' " @click.prevent="selectGuiGe(2)">12G+256G</a>
        <a href="#" :class="current == 3 ? 'active' : '' " @click.prevent="selectGuiGe(3)">16G+512G</a>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            current:2 //第几个有样式,默认是1
        }
    },
    methods:{
        selectGuiGe(num){
            console.log(num)
            this.current = num;
        }
    }
}
</script>

<style>
.item a{
    margin: 0 10px;
    border-radius: 8px;
    border:2px solid #cccccc;
    padding: 8px 12px
}

.item a.active{
    border-color:red
}
</style>